<template>
	<div class="product" v-if="pageData.goods_info">
		<!-- 如果有goods_info才进行渲染，说明数据已经请求过来了 -->
		<GalleryCom :show_current="true" :gallery="goods_info[current].gallery_v3"></GalleryCom>
		<NavCom @left-click="$router.back()" class="nav" :bg_color="'rgba(0,0,0,0)'" :text_color="'#000'" left_text=""
			right_text="">
			<template #icon_left>
				<span class="iconfont icon-xiangzuojiantou"></span>
			</template>
			<template #icon_right>
				<span class="iconfont icon-lingcunwei"></span>
			</template>
		</NavCom>
		<div class="product_info">
			<div class="price">
				<span>￥</span>{{goods_info[current].market_price}}
			</div>
			<h4 class="title">{{product_info.name}}</h4>
			<p v-html="product_info.product_desc_ext"></p>
			<ul class="sell_point_desc">
				<li v-for="item in product_info.sell_point_desc" :key="item">{{item}}</li>
			</ul>
		</div>


		<GoodNav @addCart-click="addCart()">
			<div class="btn" @click="$router.push('/')">
				<span class="iconfont icon-shouye"></span>
				<span>首页</span>
			</div>
			<div class="btn">
				<span class="iconfont icon-xiaoxizhongxin"></span>
				<span>客服</span>
			</div>
			<div class="btn"  @click="$router.push('/cart')" style="position: relative;">
				<BadgeCom :text="$store.getters.totalCount" style="right:-5px !important;"></BadgeCom> 
				<span class="iconfont icon-gouwuche"></span>
				<span >购物车</span>
			</div>			
		</GoodNav>
	</div>
</template>
<style scoped="scoped" lang="scss">
	.btn{
		display: flex;
		flex-direction: column;
		flex:1;
		font-size: .2rem;
		color:#999;
		.icon-font{
			font-size: .6rem;
			color:#333 !important;
			margin-bottom: 4px;
		}
	}
	.sell_point_desc li:nth-of-type(1):before {
		content: "①";
	}

	.sell_point_desc li:nth-of-type(2):before {
		content: "②";
	}

	.sell_point_desc li:nth-of-type(3):before {
		content: "③";
	}

	.nav .iconfont {
		background-color: rgba(0, 0, 0, .2);
		color: #fff;
		display: inline-block;
		border-radius: 50%;
		height: .6rem;
		width: .6rem;
		line-height: .6rem;
		text-align: center;
		font-weight: 900;
	}

	.nav {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
	}
</style>
<script>
	// 导入幻灯片组件
	import GalleryCom from '@/components/GalleryCom.vue'
	import NavCom from '@/components/NavCom.vue'
	import GoodNav from '@/components/GoodNav.vue'
	import BadgeCom from '@/components/BadgeCom.vue'
	// 导入详情api
	import {
		GetDetail
	} from '@/api/detail.js'
	export default {
		components: {
			// 注册幻灯片组件
			GalleryCom,
			NavCom,
			GoodNav,
			BadgeCom
		},
		data() {
			return {
				current: 0, //定义当前是第几个商品
				pageData: {}, //总数据
				goods_info: [], //产品列表
				product_info: {}, //产品信息

			}
		},
		created() {
			// 获取详情数据的方法（写在methods里面可以多次调用）
			// 详情跳转到相关的产品（还是详情）
			this.getDetail();
		},
		methods: {
			addCart(){
				//当前商品
				var produce = this.goods_info[this.current];
				// 发送给服务器数据
				var data = {
					goods_id:produce.goods_id,
					img_url:produce.img_url,
					multi_buy_limit:{first:produce.multi_buy_limit.first},
					name:produce.name,
					num:1,
					price:produce.price
				}
				// 执行添加购物车动作
				this.$store.dispatch("addCart",data);
			},
			getDetail() {
				GetDetail({
						client_id: 180100031051,
						webp: 1,
						commodity_id: this.$route.params.id,
						pid: this.$route.params.id,
					})
					.then(res => {
						// 总得页面数据
						this.pageData = res.data.data;
						// 产品列表数据
						this.goods_info = res.data.data.goods_info;
						// 产品信息数据
						this.product_info = res.data.data.product_info;
					})
			}
		}
	}
</script>
